<!--  -->
<template>
  <div class="share-reward f-12">
    <div class="nav flex justify-between aligin-center">
      <div>
        <router-link tag="span" to="/index/home" class="back"></router-link>
      </div>
      <span class="f-18 color-white">分享有礼</span>
      <span></span>
    </div>
    <div class="tip">推荐好友领福利</div>
    <div class="content">
      <div class="tip-wrapper">
        <div>1.分享给好友，好友也有机会领取礼品</div>
        <div>2.分享越多机会越大，一次注册永久有效</div>
      </div>
      <div class="share-code flex justify-center" id="share-code">
        <img class="qr" id="qr-img" :src="dataUrl" alt="邀请二维码" />
      </div>
      <div class="mt-12 color-gray">使用微信扫一扫或发送给好友</div>
      <div class="flex justify-center option">
        <span class="btn1 mr-20 flex justify-center aligin-center color-white" @click="copyUrl">分享好友</span>
        <span
          class="btn1 flex justify-center aligin-center color-white"
          @click="showPoster=true"
        >保存图片</span>
      </div>
    </div>
    <div class="info" v-if="showMask">
      <div class="J-weixin-tip weixin-tip">
        <div class="weixin-tip-content">请在菜单中选择分享</div>
      </div>
      <div class="btn flex justify-center aligin-center" @click="showMask=false">我知道了</div>
    </div>
    <div class="register-wrapper" id="poster">
      <div class="register-help">
        <div class="title">
          <!-- 注册参与活动赢
          <span class="color-red">宝马</span>-->
        </div>
        <div class="flex justify-center mt-8">
          <span class="left-tip flex justify-center aligin-center">注册有好礼</span>
          <span class="right-tip flex justify-center aligin-center">分享得福利</span>
        </div>
        <div class="mt-12 f-14">低价+活动 优品+权威 本土+特色 文化+品牌</div>
        <!-- <span class="withdrawal"></span> -->
      </div>
      <div class="content">
        <canvas class="qr-canvas" id="qrCode-canvas"></canvas>
        <div class="mt-12 f-18 color-gray">长按二维码注册下载</div>
        <div class="cy-logo f-18 color-red">融媒优品</div>
        <div class="f-14 cy-title color-red">体验家乡的味道</div>
      </div>
    </div>
    <div
      class="poster flex justify-center aligin-center"
      v-if="showPoster"
      @click="showPoster=false"
    >
      <img class="poster-img" :src="posterDataUrl" alt @click.stop />
    </div>
  </div>
</template>

<script>
import { userInfo, homeJsk } from '../../api/api'
import QRCode from 'qrcode'
import html2canvas from 'html2canvas'
import { ImagePreview } from 'vant'
export default {
  components: {},
  data() {
    return {
      pid: '',
      imgUrl: '',
      dataUrl: '',
      showMask: false,
      posterDataUrl: '',
      showPoster: false
    }
  },
  computed: {
    shareUrl() {
      return window.location.origin + '/register?pid=' + this.pid
    }
  },
  watch: {},
  methods: {
    createPoster() {
      let canvas = document.getElementById('qrCode-canvas')
      QRCode.toCanvas(
        canvas,
        window.location.origin + '/register?pid=' + this.pid,
        error => {
          if (error) {
            console.log(error)
          } else {
          }
        }
      )
      let poster = document.getElementById('poster')
      html2canvas(poster).then(canvas => {
        this.posterDataUrl = canvas.toDataURL()
      })
    },
    draw() {
      var that = this
      html2canvas(that.$refs.box).then(function(canvas) {
        that.imgUrl = canvas.toDataURL() //将canvas转为base64图片(eg. )
      })
    },
    _shareConfig(jsk) {
      wx.config(jsk)
      wx.ready(() => {
        wx.updateTimelineShareData({
          title: '分享有礼', // 分享标题
          link: window.location.origin + '/shareRegister' + '?pid=' + this.pid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

          success: function() {
            // 设置成功
          }
        })
        wx.updateAppMessageShareData({
          title: '分享有礼', // 分享标题
          link: window.location.origin + '/shareRegister' + '?pid=' + this.pid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          desc: '兰溪官方特色购物平台。', // 分享描述

          success: function() {
            // 设置成功
          }
        })
      })
      wx.error(res => {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      })
    },
    savePic() {
      let img = document.querySelector('#qrcode img')
      let link = document.createElement('a')
      link.href = img.src
      link.download = 'qrCode.png'
      link.click()
    },
    // 复制链接
    copyUrl() {
      var ua = navigator.userAgent.toLowerCase()
      var isWeixin = ua.indexOf('micromessenger') != -1
      if (isWeixin) {
        this.showMask = true
      } else {
        let url = window.location.origin + '/shareRegister?pid=' + this.pid
        this.$copyText(url).then(
          e => {
            this.$toast('复制成功！')
          },
          e => {
            this.$notify(e)
          }
        )
      }
    }
  },
  created() {},
  mounted() {
    userInfo().then(({ data: { result } }) => {
      this.pid = result.uid
      let img = document.getElementById('qr-img')
      let canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      //用 canvas 对象和邀请链接生成二维码，并将生成的二维码转为 base64
      QRCode.toCanvas(
        canvas,
        window.location.origin + '/shareRegister?pid=' + this.pid,
        error => {
          if (error) {
            console.log(error)
          } else {
            this.dataUrl = canvas.toDataURL('image/jpeg')
          }
        }
      )
      this.createPoster()
    })
    homeJsk().then(({ data: { result } }) => {
      if (typeof wx != 'undefined') {
        this._shareConfig(result.jsk)
      }
    })
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.share-reward {
  height: 100%;
  background: #d63e3d;
  background-image: url('../../assets/imgs/share-reward.png');
  background-size: 100% 100%;
  .nav {
    padding: 0 15px;
    box-sizing: border-box;
    height: 45px;
    .flex-1 {
      margin: 0 20px;
      flex: 1;
    }
    .back {
      height: 32px;
      width: 32px;
      background: url('../../assets/imgs/arrow-left-white.png');
      background-size: 100% 100%;
    }
  }
  .tip {
    margin-top: 40px;
    text-align: center;
    font-size: 41px;
    font-weight: 800;
    color: rgba(255, 255, 255, 1);
  }
  .content {
    margin: 0 auto;
    height: 365px;
    width: 293px;
    text-align: center;
    background: url('../../assets/imgs/share-reward-bg.png');
    background-size: 100% 100%;
    .tip-wrapper {
      padding-top: 48px;
      text-indent: 28px;
      text-align: start;
      font-size: 11px;
      color: #000;
      line-height: 18px;
    }
    .share-code {
      margin: 20px auto 0;
      .qr {
        height: 133px;
        width: 133px;
      }
    }
    .code-img {
      height: 100%;
      width: 100%;
    }
    .option {
      margin-top: 14px;
    }
    .btn1 {
      width: 75px;
      height: 29px;
      background: rgba(214, 62, 61, 1);
      border-radius: 13px;
    }
  }
}
.info {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.btn {
  color: #fff;
  margin: 10px auto;
  width: 70px;
  height: 25px;
  border-radius: 5px;
  border: 1px dashed #fff;
}
.weixin-tip-content {
  font-size: 16px;
  letter-spacing: 5px;
  font-weight: bold;
  line-height: 20px;
}
.weixin-tip {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  width: 265px;
  padding: 55px 0 0;
  margin: 0 auto;
  text-align: center;
  background: url()
    no-repeat right top;
  background-size: 45px 68px;
}

.weixin-tip-img {
  padding: 110px 0 0;
}

.weixin-tip-img::after {
  display: block;
  margin: 15px auto;
  content: ' ';
  background-size: cover;
}
.poster {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  .poster-img {
    width: 262px;
    height: 466px;
  }
}
.register-wrapper {
  position: fixed;
  padding-top: 12px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #d63e3d;
  background-image: url('');
  background-size: 100% 100%;
}
.register-help {
  position: relative;
  height: 221px;
  background: url('');
  background-size: 100% 100%;
  text-align: center;
  .withdrawal {
    position: absolute;
    top: 47px;
    right: 0;
    width: 78px;
    height: 36px;
    background: url('../../assets/imgs/withdrawal.png');
    background-size: 100% 100%;
  }
  .title {
    padding-top: 67px;
    font-size: 27px;
    color: rgba(71, 67, 67, 1);
    line-height: 21px;
    text-align: center;
  }
  .color-red {
    color: #ff343e;
  }
  .left-tip {
    width: 137px;
    height: 28px;
    background: rgba(255, 52, 63, 1);
    border-radius: 14px 0px 0px 14px;
    color: #fff;
    font-size: 14px;
  }
  .right-tip {
    width: 137px;
    height: 28px;
    border-radius: 0px 14px 14px 0px;
    border: 1px solid rgba(255, 52, 63, 1);
    color: #ff343f;
    box-sizing: border-box;
    font-size: 14px;
  }
}
.qr-canvas {
  margin-top: 44px;
  height: 133px;
  width: 133px;
}
.color-red {
  color: #d63e3d;
}
.cy-logo {
  margin-top: 44px;
  font-weight: bold;
  text-align: center;
}
.cy-title {
  margin-top: 6px;
  text-align: center;
}
</style>